<template>
  <div class="h-full w-[100%]">
    <div>
      <div class="flex zxcx-card">
        <div>造型节拍</div>
        <div>{{ activeData?.M10 || "-" }}</div>
        <div>秒</div>
      </div>
      <div class="flex zxcx-card">
        <div>造型压力</div>
        <div>{{ activeData?.M11 || "-" }}</div>
        <div>KG</div>
      </div>
      <div class="flex zxcx-card">
        <div>造型油温</div>
        <div>{{ activeData?.M12 || "-" }}</div>
        <div>℃</div>
      </div>
      <div class="flex zxcx-card">
        <div>造型油位</div>
        <div>{{ activeData?.M13 || "-" }}</div>
        <div>MM</div>
      </div>
    </div>
    <!-- 1 绿色  0红色 -->
    <div class="zxcs-card-box">
      <div class="zxcs-card1">
        <div :class="getClassColor(activeData.M14)">造型线自动</div>
      </div>
      <div class="zxcs-card1">
        <div :class="getClassColor(activeData.M15)">落砂机启动</div>
      </div>
    </div>
    <div class="zxcs-card-box">
      <div class="zxcs-card1">
        <div :class="getClassColor(activeData.M16)">回砂皮带启动</div>
      </div>
      <div class="zxcs-card1">
        <div :class="getClassColor(activeData.M17)">合金加料自动</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DATASCREENRL02ZXCS",
  inheritAttrs: false,
});

const props = defineProps({
  zxcsData: {
    type: Object,
    default: () => {},
  },
  activeData: {
    type: Object,
    default: () => {},
  },
  refreshRate: {
    type: Number,
    default: () => 0,
  },
});

const { zxcsData, activeData, refreshRate } = toRefs(props);

onMounted(() => {});

function getClassColor(num) {
  if (num == 1) {
    return "green-color";
  } else if (num == 0) {
    return "red-color";
  }
}

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.zxcx-card {
  height: 100px;
  width: auto;
  height: 64px;
  margin: 0 20px;
  margin-top: 10px;
  background: url("@/assets/images/screen/preview (7).png") center center / 100%
    100% no-repeat;
  background: url("@/assets/images/screen/preview (1).png") center center / 100%
    100% no-repeat;
  padding: 0 25px;
  border-radius: 4px;
  writing-mode: horizontal-tb;
  text-orientation: upright;
  color: rgb(255, 255, 255);
  filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 0px)
    drop-shadow(rgb(95, 159, 255) 2px 1px 0px);
  user-select: text;
  div:nth-child(1) {
    writing-mode: horizontal-tb;
    word-spacing: 0px;
    letter-spacing: 0px;
    text-orientation: upright;
    color: rgba(255, 255, 255, 0.95);
    user-select: text;
    font-size: 24px;
    font-family: YOUSHE;
    flex: 1.4;
    line-height: 76px;
  }
  div:nth-child(2) {
    writing-mode: horizontal-tb;
    word-spacing: 0px;
    letter-spacing: 0px;
    text-orientation: upright;
    color: transparent;
    background: linear-gradient(
        0deg,
        rgb(1, 94, 234) 0px,
        rgb(0, 192, 250) 100%
      )
      text;
    user-select: text;
    font-family: YOUSHE;
    font-size: 40px;
    line-height: 70px;
    flex: 1.8;
    text-align: right;
  }
  div:nth-child(3) {
    color: rgba(255, 255, 255, 0.95);
    font-family: YOUSHE;
    flex: 0.5;
    line-height: 76px;
    text-align: right;
  }
}
.zxcs-card-box {
  display: flex;
  height: 64px;
  margin: 0 20px;
  margin-top: 10px;
  .zxcs-card1 {
    flex: 1;
    background: url("@/assets/images/screen/preview (7).png") center center /
      100% 100% no-repeat;
    padding: 0 10px;
    border-radius: 4px;
    div {
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      letter-spacing: 0px;
      text-orientation: upright;
      color: rgba(255, 255, 255, 0.95);
      user-select: text;
      font-size: 24px;
      font-family: YOUSHE;
      line-height: 76px;
      text-align: center;
    }
  }
  .zxcs-card1:nth-child(1) {
    margin-right: 5px;
  }
  .zxcs-card1:nth-child(2) {
    margin-left: 5px;
  }
}
.green-color {
  color: #2ffff3 !important;
}
.red-color {
  color: red !important;
}
</style>
